<template>
    <el-container>
        <el-header>
            <h2>饮水机{{ysjid}}数据展示</h2>
        </el-header>
        <el-main>
            <el-row>
                <div style="width: 600; height: 600; color:red; float: left;">
                    <el-card style="width: 610px; height: 350px; ">

                        <div style="text-align: left; width: 350px;  float: right">
                            <h3>高水位阈值:{{ limit1 }}</h3>
                            <h3>低水位阈值:{{ limit2 }}</h3>
                            <h3>温度阈值:{{ limit3 }}℃</h3>
                            <h3>饮水机属性:{{ buttonvalue1 }}</h3>
                            <!-- <h3>温度阈值:{{ limit2 }}℃</h3> -->
                            <!-- <h3>光照强度阈值:{{ limit3 }}</h3>
                            <h3>可利用温差:{{ limit4 }}</h3>
                            <h3>电机状态:{{ buttonvalue1 }}</h3>  -->
                        </div>

                        <div style="text-align: left; width: 350px;  ">
                            <h3>正常水温:{{ state1 }}℃</h3>
                            <h3>加热水温:{{ state2 }}℃</h3>
                            <h3>水源水质:{{ state3 }}</h3>
                            <h3>饮水水质:{{ state4 }}</h3>
                            <h3>水位:{{ sw }}</h3> 
                             <h3>学生卡号:{{ cardid }}</h3>
                            <!-- <h3>风扇1功率:{{ power1 }}</h3>
                            <h3>风扇2功率:{{ power2 }}</h3>
                            <h3>LED灯发光强度:{{ power3 }}</h3> -->
                        </div>



                    </el-card>
                    <el-card style="width: 610px; height: 250px;">
                        <div style="text-align: left; width: 350px; float: right; ">
                            <!-- <h3>功率1:{{ power1 }}</h3>
                            <h3>功率2:{{ power2 }}</h3>
                            <h3>功率3:{{ power3 }}</h3> -->

                        </div>
                        <div style="text-align: left; width: 350px;  ">
                            <!-- <h3>温度阈值:{{ limit1 }}℃</h3>
                            <h3>低水位阈值:{{ limit2 }}</h3>
                            <h3>高水位阈值:{{ limit3 }}</h3> -->
                         
                        </div>
                    </el-card>
                </div>



                <div style="width: 600; height: 600; color:red; float: left; ">
                    <el-card style="width: 660px; height: 150px;">
                        <h3>当前时间:{{ currentTime }}</h3>
                    </el-card>
                    <el-card style="width: 660px; height: 460px;">
                        <div style="text-align: left; width: 350px;  ">
                           

                            <!-- <h3>电压强度:{{ state7 }}</h3> -->
                            <!-- <h3>警报:{{ warn }}</h3> -->
                        </div>
                    </el-card>
                </div>



            </el-row>
            <el-row>
                <div style="width: 300; height: 600; color:red; float: left; ">
                    <el-card style="width: 610px; height: 600px; ">
                        <div style="text-align: left; width: 350px;  float: left;">

                            <h3>饮水机属性设置</h3>
                            <el-button type="primary" @click="setbuttonvalue1">正常</el-button>
                            <br>
                            <el-button type="primary" @click="setbuttonvalue2">暂停</el-button>
                            <br>
                            <el-button type="primary" @click="setbuttonvalue3">复位</el-button>
                            <br>
                            <h3>水质超标</h3>
                            <el-switch @change="setswitch3" v-model="switch3" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>      
                            <h3>加热</h3>
                            <el-switch @change="setswitch1" v-model="switch1" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>
                            <!-- <h3>风扇2</h3>
                            <el-switch @change="setswitch2" v-model="switch2" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>  -->



                        </div>
                        <div style="text-align: left; width: 300px; height: 800px; ">
                            <!-- <el-table :data="card" style="width: 100%" :row-class-name="tableRowClassName">
                                <el-table-column prop="card" label="排队号码" width="180">
                                </el-table-column>
                            </el-table> -->
                            <!-- <h3>闭馆</h3>
                            <el-switch @change="setswitch4" v-model="switch4" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch> -->
                            <!-- <h3>设置烟雾阈值</h3>
                            <el-input v-model="inputlimit1" placeholder="烟雾阈值" style="width: 90px;  "></el-input>
                            <el-button type="primary" @click="setlimit1">确定</el-button> -->
                            <!-- <h3>设置温度阈值</h3>
                            <el-input v-model="inputlimit2" placeholder="温度阈值" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setlimit2">确定</el-button> -->
                            <!-- <h3>设置光照强度阈值</h3>
                            <el-input v-model="inputlimit3" placeholder="光照强度阈值" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setlimit3">确定</el-button>  -->
                            <!-- <h3>设置风扇1功率</h3>
                            <el-input v-model="inputpower1" placeholder="风扇1功率" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower1">确定</el-button>
                            <h3>设置风扇2功率</h3>
                            <el-input v-model="inputpower2" placeholder="风扇2功率" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower2">确定</el-button> -->

                        </div>
                    </el-card>
                </div>
                <div style="width: 300; height: 600;  float: left; ">
                    <el-card style="width: 660px; height: 600px;">
                        <div style="text-align: left; width: 300px; height: 600px; ">
                            <!-- <h3>设置LED灯功率</h3>
                            <el-input v-model="inputpower3" placeholder="LED灯功率" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower3">确定</el-button> -->
                            <!-- <h3>设置可利用温差</h3>
                            <el-input v-model="inputlimit4" placeholder="温度阈值1" style="width: 90px;  "></el-input>
                            <el-button type="primary" @click="setlimit4">确定</el-button> -->
                        </div>
                    </el-card>
                </div>

            </el-row>
        </el-main>
    </el-container>


</template>


<script>

const axios = require('axios');
import { websocket } from '@/utils/websocket';

//相当于导入和逻辑处理一起解决
var sendMeg = "";//处理发送给硬件的信息
var Meg = "";
var cardid = ""; // eslint-disable-line no-unused-vars

export default {
    mounted(){
        console.log(this.$pagechange);
    },
    data() {
        return {
            // inputpower1:"",
            // inputpower2:"",
            // inputpower3:"",
            // power1:0,
            // power2:0,
            // power3:0,
            inputlimit1: "", //输入消息
            // inputlimit2: "", //设置温度阈值2
            // inputlimit3: "", //设置光照阈值
            // inputlimit4: "", //设置可利用温差
            switch1: false,
            // switch2: false,
            switch3: false, //水质超标
            // switch4: false, //闭馆
            card: ["AE71A51D"],  //学生卡
            state1: 0, //正常水温
            state2: 0, //加热水温
            state3: 0, //水源水质 
            state4: 0, //饮水水质
            // state5: "", //v1
            // state6: "", //v2
            // state7:"",
            state8: "",
            // state9: "", //人员活动状态
            currentTime: "",
            limit1: 20, //高水位阈值
            limit2: 20, //低水位阈值
            limit3: 25, //温度阈值
            // limit4: 20, //可利用温差
            // warn: "",
            buttonvalue1: "", //开始取号
            // buttonvalue2: "", 
            // buttonvalue3: "", 
            cardid: "", //传来的卡号
            change: 0,
            // changecurrentTime: "",
            hh: 0,
            ss: 0,
            mm: 0,
            ysjid: "2001",
            sw:0,
            swbegin:0,  //记录开始水位
            ysl:0, //饮水量
           
        }
    },
    computed: {
        globalVar() {   //全局变量
            return this.$store.state.globalVar;
        }
    },
    watch: {  //保存本地
    // state1(newValue) {
    //     console.log("保存成功")
    //   localStorage.setItem('state1', newValue);
    // },
    // card(newValue) {
    //   // 在这里执行保存到本地的操作，可以选择使用 localStorage 或其他方式
    //   localStorage.setItem('card', JSON.stringify(newValue));
    // }
  },
    created() {
        this.updateTime();
        this.initWecSocket();
        // this.state1 = localStorage.getItem('state1');  //从本地获取数据
        // this.card = JSON.parse(localStorage.getItem('card'));
    },
    computed: {   //全局变量实时响应
        globalVar() {
            return this.$store.state.globalVar;
        }
    },
    methods: {
    
        updateGlobalVar(newValue) {  //全局变量更新方法
            this.$store.commit('updateGlobalVar', newValue);
        },
        setswitch1: function(){  //加热
            if(this.switch1 == true){
                axios.get("http://localhost:8888/sendMessageTo/HWjrZ");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWtzjrZ");
            }
        },
        setswitch3: function(){  //水质超标
            if(this.switch3 == true){
                axios.get("http://localhost:8888/sendMessageTo/HWWarning1Z");
                axios.get("http://localhost:8888/sendMessageToMyselfwarn/HWwarn1Z");  //存数据库
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWWarning0Z");
            }
        },
        updateTime: function () {  //获取当前时间
            this.currentTime = new Date().toLocaleTimeString();
            setTimeout(this.updateTime); // 每秒更新一次时间
        },
        setbuttonvalue1: function(){  //正常
            this.buttonvalue1 = "正常"
            axios.get("http://localhost:8888/sendMessageTo/HWnormZ");
        },
        setbuttonvalue2: function(){  //暂停
            this.buttonvalue1 = "暂停"
            axios.get("http://localhost:8888/sendMessageTo/HWstopZ");
        },
        setbuttonvalue3: function(){  //复位
            this.buttonvalue1 = "复位"
            axios.get("http://localhost:8888/sendMessageTo/HWresertZ");
        },
        reconnect: function () {
            sendMeg = "HWtime" + this.currentTime +  "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            // sendMeg = "Lmax" + this.limit1 + "Z";
            // axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            // sendMeg = "Tmax" + this.limit2 + "Z";
            // axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            sendMeg = "Light" + this.limit3 + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            // sendMeg = "HWtime" + this.currentTime + "Z";
            // axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            // if (this.switch4 == false) {
            //     axios.get("http://localhost:8888/sendMessageTo/HWled10Z");
            // } else if (this.switch4 == true) {
            //     axios.get("http://localhost:8888/sendMessageTo/HWled11Z");
            // }
        },
        initWecSocket: function () {
            // this.webSocket = new WebSocket("ws://localhost:8888//ws/WebSocket");
            this.webSocket = websocket;
            this.webSocket.onmessage = this.webSocketOnmessage;
            // this.webSocket.onerror = this.webSocketOnerror();
            //初始化完毕之后echarts显示数据信息
        },
        webSocketOnmessage: function (event) { //对接受的信息进行逻辑判断
            //    Meg=JSON.parse(event.data)
            Meg = event.data;
            console.log("收到硬件信息" + Meg);
            //根据收到的信息实时显示到页面
           
            // if (event.data == "Reconnect") {
            //     this.reconnect()
            // }
            // else {
            //     if (event.data.substring(0, 5) == "HWPID") {
            //         this.cardid = event.data.substring(5, event.data.length - 1);
            //     }
            //     if (event.data.substring(0, 5) == "Light") {
            //         this.limit1 = event.data.substring(5, event.data.length - 1);
            //     }
            // }
            if (event.data == "Reconnect") {
                this.reconnect()
            }
            else if (event.data.substring(0, 5) == "HWPID") {  //判断卡是否合法
                // var flag = false
                    this.cardid = event.data.substring(5, event.data.length - 1);  
                    // for(var i = 0 ;i < this.card.length; i++){
                    //     if(this.card[i] == this.cardid){
                    //         flag = true
                    //         this.buttonvalue1 = "正常"
                    //         axios.get("http://localhost:8888/sendMessageTo/HWnormZ");
                    //     }
                    // }
                    // if(flag == false){
                    //     this.buttonvalue1 = "暂停"
                    //     axios.get("http://localhost:8888/sendMessageTo/HWstopZ");
                    // }
                }
            else if(event.data.substring(0, 4) == "HWID"){
                this.ysjid = event.data.substring(4, event.data.length - 1)
            }
            else if(event.data.substring(0, 2) == "t1"){
                this.state1 = event.data.substring(2, )
            }
            else if(event.data.substring(0, 2) == "t2"){  //热水温度
                this.state2 = event.data.substring(2, )
            }
            else if(event.data.substring(0, 4) == "tds1"){ //水源水质
                this.state3 = event.data.substring(4, )
            }
            else if(event.data.substring(0, 4) == "tds2"){  //饮水水质
                this.state4 = event.data.substring(4, )
            }
            else if(event.data.substring(0, 2) == "sw"){   //接受水位
                this.sw = event.data.substring(2, )
            }
            else if(event.data.substring(0, 5) == "HWrsZ"){  //出热水
                this.swbegin = this.sw
                if(this.state2 < this.limit3){
                    axios.get("http://localhost:8888/sendMessageTo/HWjrZ");
                    this.switch1 = true;
                }
                else{
                    this.switch1 = false;
                    axios.get("http://localhost:8888/sendMessageTo/HWtzjrZ");
                }
            }
            else if(event.data.substring(0, 5) == "HWcwZ"){  //出温水
                this.swbegin = this.sw
            }
            else if(event.data.substring(0, 4) == "Tmax"){  //高水位阈值
                this.limit1 = event.data.substring(4,event.data.length - 1 )
            }
            else if(event.data.substring(0, 4) == "Lmax"){  //低水位阈值
                this.limit2 = event.data.substring(4, event.data.length - 1)
            }
            else if(event.data.substring(0, 5) == "Light"){  //温度阈值
                this.limit3 = event.data.substring(5, event.data.length - 1)
            }
            
            else if(event.data.substring(0, 7) == "HWtzcsZ"){  //停止出水保存饮水量
                if(this.cardid != ""  &&  this.ysjid != ""){
                this.ysl = Math.abs(this.swbegin - this.sw);
                sendMeg = "HWysjid" + this.ysjid + "stuid" + this.cardid + "ysl" + this.ysl + "Z"
                axios.get("http://localhost:8888/sendMessageToMyself/" + sendMeg)
                axios.get("http://localhost:8888/sendMessageTo/ok")
                console.log("存储成功！")
                }
            }
            else if(event.data == "HWError1Z"){  //饮水机故障
                axios.get("http://localhost:8888/sendMessageToMyselfwarn/HWwarn2Z");  //存数据库
            }
            else if(event.data == "HWresertZ"){   //接受复位
                this.buttonvalue1 = "复位"
            }
            else if(event.data == "HWstopZ"){   //接受暂停
                this.buttonvalue1 = "暂停"
            }
            else if(event.data == "HWnormZ"){   //接受正常
                this.buttonvalue1 = "正常"
            }
            else if(event.data.substring(0,5) == "HWysl"){   //接受断电过程中的饮水量
                this.ysl = event.data.substring(5,event.data.length - 1)
                if(this.cardid != ""  &&  this.ysjid != ""){
                sendMeg = "HWysjid" + this.ysjid + "stuid" + this.cardid + "ysl" + this.ysl + "Z"
                axios.get("http://localhost:8888/sendMessageToMyself/" + sendMeg)
                }
            }
            

        },

    }

}
</script>
